<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>SDUT酒店管理系统</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
        <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
        <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
        <!--LOADING STYLESHEET FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
        <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
        <!--新增加的css样式-->
        <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
        <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
        <script src="/static/js/echarts/echarts.min.js" th:src="@{/js/echarts/echarts.min.js}"></script>
    </head>
    <body class=" ">
        <div>
            <!--BEGIN BACK TO TOP-->
            <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
            <!-- 引用头部 -->
            <div th:replace="common/top::topFragment"></div>
            <!--END TOPBAR-->
            <div id="wrapper">
                <!-- 引用左菜单导航栏 -->
                <div th:replace="common/leftToolBar::leftToolbar"></div>
                <!--END CHAT FORM-->
                <!--BEGIN PAGE WRAPPER-->
                <div id="page-wrapper">
                    <!-- 引用工具条 -->
                    <div th:replace="common/toolBar::toolBar"></div>
                    <!--END TITLE & BREADCRUMB PAGE-->
                    <!--BEGIN CONTENT-->
                    <!--右侧区内容的编写 -->
                    <div class="page-content">
                        <!-- 功能操作内容 -->
                       <!-- <h1>日志报表</h1>-->
                        <div id="main" style="width: 1000px;height: 400px;" ></div>
                         <script type="text/javascript">
                           // 基于准备好的dom，初始化echarts实例
                           var myChart = echarts.init(document.getElementById("main"));

                           // 指定图表的配置项和数据
                           var option = {
                               title: {
                                   text: '收入'
                               },
                               tooltip: {
                                   trigger: 'axis'
                               },
                               toolbox: {
                                   show: true,
                                   feature: {
                                       dataZoom: {
                                           yAxisIndex: 'none'
                                       }, //区域缩放，区域缩放还原
                                       dataView: {
                                           readOnly: false
                                       }, //数据视图
                                       magicType: {
                                           type: ['line', 'bar']
                                       },  //切换为折线图，切换为柱状图
                                       restore: {},  //还原
                                       saveAsImage: {}   //保存为图片
                                   }
                               },
                            /*   /!* 图例组件。 *!/
                               legend: {
                                   data:['收入']
                               },*/
                              grid: {
                                   left: '3%',
                                   right: '4%',
                                   bottom: '3%',
                                   containLabel: true
                               },
                               xAxis: {
                                   type : 'category',
                                   boundaryGap : false,
                                   data:[]
                               },
                               yAxis:[{
                                   type : 'value'
                               }] ,
                               series: [
                                   {
                                       name:'收入',
                                       type:'line',
                                       stack: '总量',
                                       areaStyle: {normal: {}},
                                       data:[]
                                   }
                               ]
                           };

                           // 使用刚指定的配置项和数据显示图表。
                           myChart.setOption(option);

                           myChart.showLoading(); //数据加载完毕前，先加载一段简单的loading动画
                             var months = []; //月份数组
                             var moneys = [];//金额数组

                             $.ajax({
                                type:"post",
                                 async:true, //异步请求（同步请求会锁住浏览器，用户其他请求必须等待）
                                 url:"/finance/Data",
                                 data:{},
                                 dataType:"json",
                                 success:function (result) {
                                     for (var i=0;i<result.money.length;i++){
                                         console.log(result.money[i]);
                                         moneys.push(result.money[i]); //取出每月的消费总额
                                     }

                                     for (var i=0;i<result.month.length;i++){
                                         console.log(result.month[i])
                                         months.push(result.month[i]); //取出最近的月份
                                     }

                                     //隐藏加载动画
                                     myChart.hideLoading();
                                     //加载数据图表
                                     myChart.setOption({
                                         xAxis:{
                                             data:months
                                         },
                                         series:[{

                                             //根据名称对应到相应的序列
                                             name:'收入',
                                             data:moneys
                                         }]

                                     });

                                 },error:function (errorMsg) {
                                     //请求失败时候，执行这条数据
                                     alert("图表请求失败");
                                     myChart.hideLoading();
                                 }

                             })



                       </script>
                    </div>

                    <!--END CONTENT-->
                </div>
                <!-- 引用底部 -->
                <div th:replace="common/bottom::bottom"></div>
                <!--END FOOTER-->
                <!--END PAGE WRAPPER-->
            </div>
        </div>
        <script>
            $(function () {
                $("#breadAppend").append('<i class="fa fa-home"></i><a href="#">财务统计</a> <i class="fa fa-angle-right"></i> <a href="#">财务查看</a>');
                $("#statistics").addClass("active");
            })
        </script>
        <!-- 引用脚本 -->
        <div th:replace="common/script::script"></div>
    </body>
</html>